<template>
  <div :class="isSearch ? 'SearchClick' : 'Search'">
    <img class="searchBtn" src="../../../public/img/搜索.png" alt="">
    <form action="">
      <input class="searchIpt" placeholder="搜索" type="text" v-model="searchIptVal" @focus="IptFocus" @blur="IptBlur"
        @input="IptChange" @keydown.enter="handleEnter">
    </form>
    <img class="searchClose" v-show="searchIptVal != ''" src="../../../public/img/关闭.png" @click="cancelSearch" alt="">
  </div>
  <div class="ProductInventory-panel">
    <div class="ProductInventory-ProductLibrary-left">
      <el-scrollbar class="elscrollbar">
        <div class="ProductInventory-model" v-for="(item, index) in State.ProductInventoryArr" :key="index"
          :class="selectProduct === item.number ? 'ProductInventory-ProductLibrarylistactive' : ''"
          @click="GetClickProduc(index)">
          <div class="ProductInventory-model-ProductName"
            :class="selectProduct == item.number ? 'ProductInventory-fontcolor' : ''">
            <span>{{ item.system }}</span>
          </div>
          <div class="ProductInventory-model-ProductType"
            :class="selectProduct == item.number ? 'ProductInventory-fontcolor' : ''">
            <span>{{ item.name }}</span>
          </div>
          <div class="ProductInventory-model-ProductCode"
            :class="selectProduct == item.number ? 'ProductInventory-fontcolor' : ''">
            <span>{{ item.vehicleModel }} <span> </span><span class="shu">|</span> <span> </span><span>No.</span>{{
              item.number.slice(-3) }}</span>
          </div>
          <div class="ProductInventory-model-ProductImg">
            <div>
              <!-- <img :src="State.ProductImgArr[index]"> -->
              <img :src="'/img/productLib/' + item.number + '.png'">
            </div>
          </div>
        </div>
        <div class="div-empty" v-if="State.ProductInventoryArr.length % 3 === 1"></div>
        <div class="div-empty" v-if="State.ProductInventoryArr.length % 3 === 1"></div>
        <div class="div-empty" v-if="State.ProductInventoryArr.length % 3 === 2"></div>
      </el-scrollbar>
    </div>
    <div class="ProductInventory-ProductLibrary-rigth">
      <div class="ProductInventory-model-right-ProductName">
        <span>{{ State.Product.ProductSystem }}</span>
      </div>
      <div class="ProductInventory-model-right-ProductType">
        <span>{{ State.Product.ProductSonSystem }}</span>
      </div>
      <div class="ProductInventory-model-right-ProductInventory">
        <div>
          <img :src="State.Product.ProductImg" />
        </div>
      </div>
      <div class="ProductInventory-model-right-introduction-panel">
        <div></div>
        <div>
          <span>产品简介</span>
        </div>
      </div>
      <div class="ProductInventory-model-right-content">
        <span>{{ State.Product.Synopsis }}</span>
      </div>
      <div class="ProductInventory-model-right-introduction-count">
        <div></div>
        <div>
          <span>训练任务</span>
        </div>
      </div>
      <div class="ProductInventory-model-right-number">
        <span>{{ State.Product.TaskCount }}</span>
      </div>
      <div class="ProductInventory-model-right-difficulty">
        <div></div>
        <div>
          <span>任务难度</span>
        </div>
      </div>
      <div class="ProductInventory-model-right-difficulty-number">
        <span>{{ State.Product.Difficultys[State.Product.Difficulty - 1] }}</span>
      </div>
      <div class="ProductInventory-addbtn" v-if="State.Product.AddButtonBoolean === false">
        <el-button type="primary" @click="ProductAdd">添加产品</el-button>
      </div>
    </div>
  </div>
  <!-- 产品添加提示框-->
  <DialogComponents :DialogComponent="ProductAddDialogComponent" @click="ProductAddDialogComponentFn">
  </DialogComponents>



</template>

<script>
import { defineComponent, reactive, ref, watch, toRef, toRefs } from "vue";
import router from '@/router'
import DialogComponents from "@/components/compon/DialogComponents.vue";
import { postData, bubbleSort } from "@/assets/js/pubilcs.js";
import bus from "@/bus";
import { ElMessage } from 'element-plus'
import { ElLoading } from 'element-plus'
export default defineComponent({
  name: "ProductInventory",
  components: {
    DialogComponents
  },
  props: {
    ProductInventoryArr: {
      type: Array,
      default: "",
    },
  },
  setup(props) {
    let State = reactive({
      ProductInventoryArr: [],
      ProductActivationListArr: [],
      ProductImgArr: [],
      Product: {
        ProductSystem: "",
        ProductSonSystem: "",
        ProductImg: '',
        Synopsis: "",
        TaskCount: 0,
        Difficultys: ["★", "★★", "★★★", "★★★★", "★★★★★★"],
        AddButtonBoolean: false
      },
      ProducAddLoding: '',
    })
    let searchIptVal = ref('')
    let isSearch = ref(false)
    let temporaryList = []
    let selectProduct = ref(0)
    //产品添加对话框  #
    let ProductAddDialogComponent = reactive({
      Dialogboolean: false,
      Msg: "",
      Speanstyles: {

      },
      Buttonstyle: {
        background: 'linear-gradient(-90deg, #0974D8, #3D8EF1, #7C7FF8)'
      },
      Buttonname: "确定",
    })
    //选中的产品
    let SelectedIndex = ref(0)
    //监听传过来得值
    watch(() => props.ProductInventoryArr, (val, old) => {
      // console.log('产品数据', props.ProductInventoryArr);
      if (val !== old) {
        //产品的信息临时储存到sessionStorage
        State.ProductInventoryArr = val
        sessionStorage.setItem("ProductInventoryArr", JSON.stringify(val))
        let imgid = val[0].number
        State.ProductInventoryArr = val
        State.Product.ProductSystem = val[0].system
        State.Product.ProductSonSystem = val[0].name
        State.Product.ProductImg = '/img/productLib/' + imgid + '.png'
        State.Product.Synopsis = val[0].synopsis;
        State.Product.TaskCount = val[0].count;
        State.Product.Difficulty = val[0].difficulty;
        State.Product.AddButtonBoolean = val[0].isAdd
        for (let i = 0; i < val.length; i++) {
          State.ProductImgArr.push('/img/productLib/' + val[i].number + '.png')
        }
        // console.log('图片路径',State.ProductImgArr);

      }
    },
      { deep: true }
    )

    //获取平台服务器数据
    postData("/api/ProductAuthority/GetAllByUserId", JSON.stringify({ UserId: sessionStorage.getItem("userid") }), sessionStorage.getItem("token")).
      then(function (res) {
        if (res.success) {
          State.ProductActivationListArr = res.result.result
          // console.log(State.ProductActivationListArr, '接口获取');
        }
      })
      .catch((error) => {

      });

    //选中的产品
    function GetClickProduc(index) {
      selectProduct.value = State.ProductInventoryArr[index].number
      SelectedIndex.value = index
      State.Product.ProductSystem = State.ProductInventoryArr[index].system
      State.Product.ProductSonSystem = State.ProductInventoryArr[index].name
      State.Product.ProductImg = '/img/productLib/' + State.ProductInventoryArr[index].number + '.png'
      State.Product.Synopsis = State.ProductInventoryArr[index].synopsis;
      State.Product.TaskCount = State.ProductInventoryArr[index].count;
      State.Product.Difficulty = State.ProductInventoryArr[index].difficulty;
      State.Product.AddButtonBoolean = State.ProductInventoryArr[index].isAdd
    }
    //产品添加里面按钮执行的方法
    function ProductAddDialogComponentFn(fn) {
      if (fn === 'Cancel') {
        ProductAddDialogComponent.Dialogboolean = false
      }
      if (fn === 'Ready') {
        ProductAddDialogComponent.Dialogboolean = false
        //添加产品的Id
        let ProductId = State.ProductInventoryArr[SelectedIndex.value].id
        let ShortName = State.ProductInventoryArr[SelectedIndex.value].number
        State.ProducAddLoding = ElLoading.service({
          lock: true,
          text: '产品重新加载中......',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        postData("/api/ProductAuthority/Create", JSON.stringify({ userid: sessionStorage.getItem("userid"), ProductId: ProductId }), sessionStorage.getItem("token")).
          then(function (res) {
            if (res.result.success) {
              //设置按钮的显示
              State.ProductInventoryArr[SelectedIndex.value].isAdd = true
              //临时储存信息
              sessionStorage.setItem("ProductInventoryArr", JSON.stringify(State.ProductInventoryArr))
              //判断sessionStorage是否存在
              if (!sessionStorage.getItem("ProductActivationListArr")) {
                console.log('无存储');
                State.ProductActivationListArr.push(res.result.result)
                ProducCancelOnlyStateFind(ProductId, 0, ShortName)
              } else {
                console.log('有存储');
                State.ProductActivationListArr = JSON.parse(sessionStorage.getItem("ProductActivationListArr"))
                State.ProductActivationListArr.push(res.result.result)
                ProducCancelOnlyStateFind(ProductId, State.ProductActivationListArr.length - 1, ShortName)
              }

            }
          })
          .catch((error) => {

          });
        router.push({
          name: 'HomePage',
        });
      }
    }
    //产品添加
    function ProductAdd() {
      //显示添加产品的信息对话框
      ProductAddDialogComponent.Dialogboolean = true
      //显示需要添加什么产品
      ProductAddDialogComponent.Msg = "是否添加" + State.ProductInventoryArr[SelectedIndex.value].name + "?"
    }
    //查询单个产品状态
    async function ProducCancelOnlyStateFind(id, index, ShortName) {
      let rep = await Application.PostMessageAsync(Opcode.ProductActivationStatusRequest, { Id: id, ShortName: ShortName });
      if (rep.Success) {
        //设置该产品的状态
        State.ProductActivationListArr[index].Status = rep.Status
        State.ProducAddLoding.close()
        ElMessage({
          message: '产品添加成功',
          type: 'success',
        })
        // console.log(State.ProductActivationListArr, '添加时的产品');
        //排序
        State.ProductActivationListArr = bubbleSort(State.ProductActivationListArr)
        //临时存储信息
        sessionStorage.setItem("ProductActivationListArr", JSON.stringify(State.ProductActivationListArr))
        bus.$emit("ProductActivationListArr", State.ProductActivationListArr)
      }
    }
    // 搜索聚焦
    function IptFocus() {
      isSearch.value = true
    }
    // 搜索失焦
    function IptBlur() {
      isSearch.value = false
    }
    // 搜索内容改变
    function IptChange() {
      temporaryList.value = []
      State.ProductInventoryArr.forEach(element => {
        if (element.name.includes(searchIptVal.value) || element.number.slice(-3).includes(searchIptVal.value)) {
          temporaryList.value.push(element)
        }
      });
      State.ProductInventoryArr = temporaryList.value
    }
    //监听搜索框的值
    watch(() => searchIptVal.value, (val, old) => {
      if (val == '') {
        State.ProductInventoryArr = JSON.parse(sessionStorage.getItem("ProductInventoryArr"))
      } else {
        State.ProductInventoryArr = JSON.parse(sessionStorage.getItem("ProductInventoryArr"))
        IptChange()
      }
    },
      { deep: true }
    )
    // 取消搜索
    function cancelSearch() {
      searchIptVal.value = ''
      isSearch.value = false
    }
    // enter事件
    function handleEnter(event) {
      event.preventDefault(); // 阻止默认行为
      console.log('搜索的enter键盘', event);
    }
    return {
      State,
      SelectedIndex,
      GetClickProduc,
      ProductAddDialogComponent,
      ProductAddDialogComponentFn,
      ProductAdd,
      IptFocus,
      IptBlur,
      cancelSearch,
      searchIptVal,
      isSearch,
      IptChange,
      temporaryList,
      selectProduct,
      handleEnter,
    };
  },
});
</script>
<style lang="less">
.ProductInventory-panel {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.ProductInventory-ProductLibrary-left {
  position: absolute;
  left: 160px;
  top: 100px;
  width: 1140px;
  height: calc(100% - 110px);
  background: #ffffff;
  border-radius: 10px;
}

.ProductInventory-ProductLibrary-left .el-scrollbar__view {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.ProductInventory-ProductLibrary-left .elscrollbar {
  position: absolute;
  width: 100%;
  height: 100%;
}

.ProductInventory-ProductLibrary-left .el-scrollbar__wrap {
  overflow-x: hidden;
}

.ProductInventory-ProductLibrary-left .ProductInventory-model {
  margin-top: 30px;
  width: 320px;
  height: 320px;
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0px 10px 80px 0px rgba(129, 133, 156, 0.2);
  border-radius: 20px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  text-align: center;
}

.div-empty {
  width: 320px;
}

.ProductInventory-model-ProductName {
  margin-top: 10px;
  width: 100%;
  height: 30px;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  background: linear-gradient(0deg, #807de1 0%, #218cde 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ProductInventory-model-ProductType {
  width: 100%;
  // height: 30px;
  height: 37px;
  margin-top: 10px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #81859c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ProductInventory-model-ProductCode {
  width: 100%;
  height: 30px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #81859c;
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ProductInventory-model-ProductImg {
  margin-top: 10px;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ProductInventory-model-ProductImg>div {
  width: 80%;
  height: 140px;
}

.ProductInventory-model-ProductImg>div img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.ProductInventory-ProductLibrary-left .ProductInventory-ProductLibrarylistactive {
  background: linear-gradient(0deg, #0974d8, #3d8ef1, #7c7ff8);
  box-shadow: 0px 10px 80px 0px rgba(129, 133, 156, 0.25);
  border-radius: 20px;
}

.ProductInventory-ProductLibrary-left .ProductInventory-fontcolor {
  background: #ffffff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ProductInventory-ProductLibrary-rigth {
  position: absolute;
  right: 38px;
  top: 100px;
  width: 540px;
  height: calc(100% - 110px);
  background: #ffffff;
  border-radius: 10px;
}

.ProductInventory-model-right-ProductName {
  margin-left: 40px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 30px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #1b1b1d;
  line-height: 56px;
}

.ProductInventory-model-right-ProductType {
  margin-left: 40px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 18px;
  font-family: PingFang SC;
  color: #81859c;
}

.ProductInventory-model-right-ProductInventory {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ProductInventory-model-right-ProductInventory>div:nth-child(1) {
  width: 460px;
  height: 240px;
  background: linear-gradient(0deg, #807de1, #218cde);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ProductInventory-model-right-ProductInventory>div:nth-child(1) img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.ProductInventory-model-right-introduction-panel,
.ProductInventory-model-right-introduction-count,
.ProductInventory-model-right-difficulty {
  margin-top: 10px;
  margin-left: 40px;
  width: 80%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ProductInventory-model-right-introduction-panel>div:nth-child(1),
.ProductInventory-model-right-introduction-count>div:nth-child(1),
.ProductInventory-model-right-difficulty>div:nth-child(1) {
  width: 4px;
  height: 14px;
  background: linear-gradient(0deg, #807de1, #218cde);
}

.ProductInventory-model-right-introduction-panel>div:nth-child(2),
.ProductInventory-model-right-introduction-count>div:nth-child(2),
.ProductInventory-model-right-difficulty>div:nth-child(2) {
  margin-left: 20px;
  display: flex;
  align-self: flex-start;
  width: 440px;
  height: 40px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #81859c;
  line-height: 56px;
  line-height: 40px;
}

.ProductInventory-model-right-content {
  margin-left: 40px;
  width: 85%;
  min-height: 60px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #1b1b1d;
  text-align: left;
  text-indent: 20PX;
}

.ProductInventory-model-right-number {
  margin-top: 10px;
  margin-left: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%;
  font-size: 16px;
  font-family: Arial;
  font-weight: 400;
  color: #1b1b1d;
  line-height: 24px;
}

.ProductInventory-model-right-difficulty-number {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 60px;
  font-size: 28px;
  color: #0974d8;
}

.ProductLibraryVideoactive {
  color: #fff;
  background: linear-gradient(0deg, #0974d8, #3d8ef1, #7c7ff8);
  box-shadow: 0px 10px 80px 0px rgba(129, 133, 156, 0.25);
}

.ProductInventory-addbtn {
  margin-top: 10px;
  width: 100%;
  height: calc(100% - 745px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 60px;
}

.ProductInventory-addbtn .el-button {
  width: 160px;
  height: 40px;

}

// 搜索款样式
.Search {
  width: 728px;
  height: 42px;
  border-radius: 5px;
  border: 1px solid #DCDFE6;
  position: absolute;
  top: 8px;
  left: 138px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 18px;
  color: #ABABAB;
  display: -webkit-inline-box;
  z-index: 1000;
}

.SearchClick {
  width: 728px;
  height: 42px;
  border-radius: 5px;
  background-color: #ffffff;
  border: 1px solid #3389EC;
  position: absolute;
  top: 8px;
  left: 138px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 18px;
  color: #080808;
  display: -webkit-inline-box;
  z-index: 1000;
}

.searchIpt {
  width: 640px;
  height: 40px;
  border: none;
}

.searchIpt::placeholder {
  color: #DCDFE6;
}

.searchIpt:focus-visible {
  outline: none;
  color: #080808;
}

.searchBtn {
  width: 15px;
  height: 15px;
  margin: 13px 14px 13px 14px;
}

.searchClose {
  width: 15px;
  height: 15px;
  margin: 13px 14px 13px 14px;
}

.shu {
  font-size: 18px;
}
</style>
